<template>
    <div class="clearfix">
        <div style="width:100%;height:100%;position:absolute;">
            <div id="mapl"></div>
        </div>
        <section class="content-header">
            <div class="title">
                首页
                <span style="padding:0 5px">></span>定位监控
            </div>
        </section>
        <section class="right-bar">
            <div class="col-md-12 top">
                <div class="clearfix" style="width:120px;margin:0 auto">
                    <span>显示车牌号码</span>
                    <input type="checkbox" @click="showcar()" name id checked="checked">
                </div>
            </div>
            <div class="col-md-12 mid">
                <div class="head clearfix">
                    <div class="col-md-4" @click="select">
                        <p>
                            <i class="fa fa-star-o" aria-hidden="true"></i>
                        </p>
                        <p>全部({{sum.onLine+sum.offLine}})</p>
                    </div>
                    <div class="col-md-4" @click="select1">
                        <p>
                            <i class="fa fa-check-square" aria-hidden="true"></i>
                        </p>
                        <p>在线({{sum.onLine}})</p>
                    </div>
                    <div class="col-md-4" @click="select2">
                        <p>
                            <i class="fa fa-times-circle" aria-hidden="true"></i>
                        </p>
                        <p>离线({{sum.offLine}})</p>
                    </div>
                </div>
                <div style="border-bottom:1px solid #bbb"></div>
                <table class="table table-hover">
                    <tbody>
                        <tr v-for="(item,key) in locationlistData" :key="key">
                            <td class="col-md-6">
                                <i class="fa fa-car" aria-hidden="true"></i>
                                <span>{{item.carNo}}</span>
                            </td>
                            <td
                                class="col-md-6"
                                @click="getGpsdata(item.simno)"
                                style="cursor: pointer;text-align:center"
                            >
                                <i class="fa fa-search-plus" aria-hidden="true"></i>&nbsp;定位
                            </td>
                        </tr>
                    </tbody>
                </table>
                <ctrlPage :setPage="getLocationlist" :type="type" ref="page"/>
            </div>
        </section>
        <!-- <section v-if="isShow" class="msg">
            <p>接收时间：{{gpsdata.sendTime}}</p>
            <p>车牌号码：{{gpsdata.plateno}}</p>
            <p>车辆类型：{{gpsdata.carType}}</p>
            <p>速度：{{gpsdata.velocity}}km/h</p>
            <p>车辆管理员：{{gpsdata.driver}}</p>
            <p>联系电话：{{gpsdata.drivermobile}}</p>
            <p style="text-align:right">
                <button type="button" class="btn btn-default" @click="toReplay">轨迹回放</button>
            </p>
        </section>-->
    </div>
</template>

<script>
import ctrlPage from "@/components/common/ctrlPage.vue";

export default {
    name: "test",
    data() {
        return {
            type: "total, prev, pager, next",
            locationlistData: [],
            gpsdata: [],
            sum: {
                total: "",
                onLine: "",
                offLine: ""
            },
            isShow: false,
            showCar: true,
            status: null,
            map: null
        };
    },
    components: {
        ctrlPage
    },
    mounted() {
        this.mapInit();
        this.$refs.page.getList(1);
        window.routergoplay = this.routergoplay;
        window.closeInfosymbol = this.closeInfosymbol;
    },
    methods: {
        toReplay() {
            // this.$router.push({redirect:'/replay/index',query:{id:gpsdata.simno}})
            // windows.location.href="www.baidu.com"
            // console.log('1')
        },
        mapInit() {
            this.map = new EJMap("mapl", {
                layers: [{ id: "定位", display: true, visible: true }]
            });
            var that = this;
            this.map.addEventListener(EJMap.Event.onFeatureClick, function(e) {
                that.map.creatInfoSymbol(
                    "name",
                    '<section v-if="isShow" class="msg"> <p>接收时间：' +
                        e.graphic.attributes.SENDTIME +
                        "</p><p>车牌号码：" +
                        e.graphic.attributes.PLATENO +
                        "</p><p>车辆类型：" +
                        e.graphic.attributes.CAR_TYPE +
                        "</p><p>速度：" +
                        e.graphic.attributes.VELOCITY +
                        "km/h</p> <p>车辆管理员：" +
                        e.graphic.attributes.DRIVER +
                        "</p><p>联系电话：" +
                        e.graphic.attributes.DERVERMOBILE +
                        "</p>" +
                        '<p style="text-align:right"><router-link :to="{path:\'replay\',query:{id:gpsdata.plateno}}"><button type="button"   onclick="routergoplay(\'replay\',\'' +
                        e.graphic.attributes.PLATENO +
                        '\')">轨迹回放</button><button type="button"     onclick="closeInfosymbol()">关闭气泡</button> </router-link></p></section>',
                    {
                        x: e.graphic.attributes.LONGITUDE,
                        y: e.graphic.attributes.LATITUDE,
                        spatialReference: {
                            wkid: 4326
                        }
                    },
                    -10,
                    -58,
                    21,
                    true
                );
            });
            that = this;
            this.map.addEventListener(EJMap.Event.onLayerAdded, function(e) {
                if (e.layer.id == "定位") {
                    that.map.initLable("定位", that.showCar, "PLATENO");
                }
            });
            //alert(321);
            // map.showScalebar();
            //map.showNavigation();
        },
        selectDate1() {
            $("#datepicker1").datepicker({
                autoclose: true,
                format: "yyyy-mm-dd"
            });
        },
        selectDate2() {
            $("#datepicker2").datepicker({
                autoclose: true,
                format: "yyyy-mm-dd"
            });
        },
        getLocationlist(pageIndex, pageSizes, callback) {
            this.$api.cars.home
                .locationlist({
                    pageNum: pageIndex || 1,
                    pageSize: pageSizes || 10,
                    status: this.status
                })
                .then(res => {
                    if (res.success) {
                        console.log(res);
                        this.locationlistData = res.data.pageInfo.list;
                        this.sum.total = res.data.pageInfo.total;
                        this.sum.onLine = res.data.onLine;
                        this.sum.offLine = res.data.offLine;
                        callback(this.locationlistData, this.sum.total);
                    }
                });
        },
        getGpsdata(simno) {
            this.isShow = true;
            this.$api.cars.home
                .gpsdata({
                    simno: simno
                })
                .then(res => {
                    if (res.success) {
                        console.log(res.data);
                        this.gpsdata = res.data;
                        if (!!res.data.longtitude || !!res.data.latitude) {
                            this.map.addPoint2GraphicsLayer(
                                {
                                    geom: {
                                        x: res.data.longtitude,
                                        y: res.data.latitude,
                                        spatialReference: { wkid: 4326 }
                                    },
                                    attributes: res.data,
                                    center: true
                                },
                                "layer_center",
                                true
                            );
                            this.map.creatInfoSymbol(
                                "name",
                                '<section v-if="isShow" class="msg"> <p>接收时间：' +
                                    res.data.sendTime +
                                    "</p><p>车牌号码：" +
                                    res.data.plateno +
                                    "</p><p>车辆类型：" +
                                    res.data.carType +
                                    "</p><p>速度：" +
                                    res.data.velocity +
                                    "km/h</p> <p>车辆管理员：" +
                                    res.data.driver +
                                    "</p><p>联系电话：" +
                                    res.data.drivermobile +
                                    "</p>" +
                                    '<p style="text-align:right"><router-link :to="{path:\'replay\',query:{id:res.data.simno}}"><button type="button"   onclick="routergoplay(\'replay\',\'' +
                                    res.data.simno +
                                    '\')">轨迹回放</button><button type="button"     onclick="closeInfosymbol()">关闭气泡</button> </router-link></p></section>',
                                {
                                    x: res.data.longtitude,
                                    y: res.data.latitude,
                                    spatialReference: {
                                        wkid: 4326
                                    }
                                },
                                -10,
                                -58,
                                21,
                                true
                            );
                            //this.map.centerAt( );
                        } else {
                            alert("未能获取到坐标数据！！！");
                        }
                    }
                });
        },
        closeInfosymbol() {
            this.map.destroyInfoSymbol("name");
        },
        showcar() {
            this.showCar = !this.showCar;
            this.map.initLable("定位", this.showCar, "PLATENO");
        },
        routergoplay(name, id) {
            this.$router.push({ path: "/replay", query: { id: id } });
        },
        select() {
            this.status = null;
            this.$refs.page.getList(1);
        },
        select1() {
            this.status = 1;
            this.$refs.page.getList(1);
        },
        select2() {
            this.status = 0;
            this.$refs.page.getList(1);
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-header {
    border-bottom: 1px solid #bbbbbb;
    padding-bottom: 15px;
    .title {
        font-weight: bolder;
    }
}
.right-bar {
    width: 300px;
    position: absolute;
    right: 0px;
    .col-md-12 {
        border-radius: 5px;
    }
    .top {
        padding: 10px;

        background: #fff;
        border: 1px solid #bbb;

        span {
            float: left;
            line-height: 26px;
        }
        input {
            float: right;

            width: 18px;
            height: 18px;
        }
    }
    .mid {
        margin-top: 10px;
        padding: 15px;
        background: #fff;
        border: 1px solid #bbb;

        .head {
            border-bottom: 2px solid #bbb;
            padding-bottom: 10px;
            margin-bottom: 10px;
            .col-md-4 {
                margin: 0;
                padding: 0;
                cursor: pointer;
            }
        }
        p {
            text-align: center;
            margin: 0;
            padding: 0;
            i {
                font-size: 20px;
            }
        }
    }
    .table {
        td {
            text-align: left;
        }
    }
}
.msg {
    width: 240px;
    background-color: rgba(152, 193, 214, 0.5);
    padding: 15px;
    border-radius: 10px;
    position: absolute;
}
</style>

